<template>
  <div class="home-wrapper" @scroll="onScroll">
    <search-bar class="search-bar" ref="searchBar" />
    <banner/>
    <activity/>
    <category/>
    <second/>
    <goods/>
    <img class="pin-gou-jie" src="http://192.168.0.102/pinGouJie.gif"/>
  </div>
</template>

<script type="text/ecmascript-6">
import Banner from './components/Banner.vue'
import Activity from './components/Activity.vue'
import Category from './components/Category.vue'
import Second from './components/second/Second.vue'
import Goods from './components/Goods.vue'
import SearchBar from './components/SearchBar.vue'

export default {
  name: 'Home',
  data: function () {
    return {
    }
  },
  created: function () {
  },
  methods: {
    initData: function () {
    },
    onScroll (event) {
      this.$refs.searchBar.onScroll(event)
    }
  },
  components: {
    Banner,
    Activity,
    Category,
    Second,
    Goods,
    SearchBar
  }
}
</script>

<style lang="stylus" scoped>
// 引用px2rem函数
// stylus使用别名需要加前缀~
@import '~@css/style.styl';

.home-wrapper
  position:absolute
  top: 0
  bottom: 0
  left :0
  right: 0
  overflow: hidden
  overflow-y: scroll
  background:$color-light-grey-ss
  .pin-gou-jie
    width:100%
    object-fit :fit
</style>
